<template>
  <div class="jdybj">
    <div class="title">
      <img src="../../../../assets/images/binzhou/bt-4.png" alt="" />
    </div>
    <div class="tabs">
      <div
        :class="activeType === '全部' ? 'active' : ''"
        class="tab1 tab"
        @click="typeChange('全部')"
      >
        <span>全部</span>
      </div>
      <div
        :class="activeType === '综合型' ? 'active' : ''"
        class="tab2 tab"
        @click="typeChange('综合型')"
      >
        <span>综合型机器人</span>
      </div>
      <div
        :class="activeType === '融合型' ? 'active' : ''"
        class="tab2 tab"
        @click="typeChange('融合型')"
      >
        <span>融合型机器人</span>
      </div>
      <div
        :class="activeType === '智慧型' ? 'active' : ''"
        class="tab2 tab"
        @click="typeChange('智慧型')"
      >
        <span>智慧型机器人</span>
      </div>
      <div
        :class="activeType === '其他类' ? 'active' : ''"
        class="tab2 tab"
        @click="typeChange('其他类')"
      >
        <span>其他类机器人</span>
      </div>
    </div>
    <div class="table-box">
      <div class="table">
        <div class="thead">
          <div class="t-row">
            <div>序号</div>
            <div>机器人名称</div>
            <div>所属部门</div>
            <div>节省人天</div>
            <div>所属种类</div>
            <div>可复制指数</div>
            <div>被复用次数</div>
            <div>累计节省时长</div>
          </div>
        </div>
        <div class="tbody" @mouseover="test1" @mouseleave="test2">
          <div v-for="row in arr2" :key="row.key1" class="t-row">
            <div>{{ row.No }}</div>
            <div class="robotName" @click="clickRobot(row)">{{ row.robotName }}</div>
            <div>{{ row.department }}</div>
            <div>{{ row.saveDay }}</div>
            <div>{{ row.catalog }}</div>
            <div>{{ row.replicableRate }}</div>
            <div>{{ row.multiplexedTimes }}</div>
            <div>{{ row.totalSavedTime }}</div>
          </div>
        </div>
      </div>
    </div>
    <div id="echart-jqr" class="echart"></div>
    <modal-dialog :show="showVideo" @close="showVideo = false">
      <video width="1200" class="video" :src="videoUrl" autoplay controls loop></video>
    </modal-dialog>
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, reactive, watchEffect, ref, onUnmounted, watch, toRefs } from 'vue'
  import * as echarts from 'echarts'
  import type { DigitalSupplyStation } from '@/api/data'
  import ModalDialog from '@/components/Binzhou/modal-dialog.vue'

  const props = defineProps({
    digitalSupplyStationList: {
      type: Array as () => DigitalSupplyStation[],
      default: () => {
        return []
      }
    }
  })

  watch(
    props,
    (newVal, oldVal) => {
      setList()
      showJqr()
    },
    {
      deep: true
    }
  )

  let arr1 = ref([])
  let arr2 = ref([])

  let timer = ref(0)

  let active = ref(0)

  let activeType = ref('全部')

  let showVideo = ref(false)

  let videoUrl = ref(window.location.origin + '/videos/szhgds.mp4')

  onMounted(() => {
    // console.log('onMounted')
    // arr2.value = arr1.value.slice(active.value, active.value + 7)
    // arr1.value = arr1.value.concat(arr1.value)
    // console.log('arr1.value', arr1.value)
    // // 执行计时器
    // runTimer()
    // showJqr()
  })

  const typeChange = (type: string) => {
    if (activeType.value != type) {
      activeType.value = type
      setList()
    }
  }

  // 先处理数据
  const setList = () => {
    active.value = 0
    if (props.digitalSupplyStationList && props.digitalSupplyStationList.length) {
      arr1.value = props.digitalSupplyStationList
        .filter((item) => {
          return item.catalog === activeType.value || activeType.value === '全部'
        })
        .map((item, index) => {
          return {
            No: index + 1,
            ...item
          }
        })
      arr2.value = arr1.value.slice(active.value, active.value + 7)
      arr1.value = arr1.value.concat(arr1.value)
    } else {
      arr1.value = []
      arr2.value = []
    }
    // 再执行计时器
    runTimer()
  }

  const showJqr = () => {
    let arr = props.digitalSupplyStationList?.slice(0, 7).reverse()
    let yAxis_data = arr?.map((item) => {
      return item.robotName
    })
    let series_data = arr?.map((item) => {
      return item.totalSavedTime
    })
    var options = {
      legend: {
        show: false
      },
      grid: {
        top: '10%',
        left: '5%',
        right: '5%',
        bottom: '5%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#1AB7E4',
            opacity: 0.5
          }
        },
        splitLine: {
          show: false
        },
        name: '\n\n小时',
        nameLocation: 'start',
        nameTextStyle: {
          color: '#fff',
          fontSize: 12
        },
        axisLabel: {
          color: '#ffffff',
          fontSize: 12
        }
      },
      yAxis: {
        type: 'category',
        axisLabel: {
          color: '#ffffff',
          fontSize: 12
        },
        axisLine: {
          lineStyle: {
            color: '#1AB7E4',
            opacity: 0.5
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {},
        data: yAxis_data
        // [
        //   '工单核对分发机器人',
        //   '财务审批机器人',
        //   '计划变更工单机器人',
        //   '批量换表机器人',
        //   '用电检查机器人',
        //   '智慧停电管控机器人',
        //   '反窃电机器人'
        // ]
      },
      series: [
        {
          name: 'Direct',
          type: 'bar',
          // stack: 'total',
          barWidth: 17,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: '#145069' },
              { offset: 1, color: '#21B5C3' }
            ]),
            borderRadius: [0, 8, 8, 0]
          },
          label: {
            // show: true
          },
          emphasis: {
            focus: 'series'
          },
          data: series_data
          // [320, 302, 301, 334, 390, 330, 320]
        }
      ]
    }
    var eCharts = echarts.init(document.getElementById('echart-jqr')!)
    eCharts.setOption(options)
    eCharts.getZr().on('click', function (params: any) {
      try {
        let text = params.topTarget.style.text
        if (yAxis_data.indexOf(text) > -1) {
          console.log('点击了左侧Y轴')
          showVideo.value = true
        }
      } catch (error) {}
    })
  }

  const runTimer = () => {
    // 先清空计时器
    timer.value && clearInterval(timer.value)
    if (arr1.value.length > 14) {
      timer.value = setInterval(() => {
        active.value++
        arr2.value = arr1.value.slice(active.value, active.value + 7)
        if (active.value == arr1.value.length / 2) {
          active.value = 0
        }
      }, 2000)
    }
  }

  const test1 = () => {
    timer.value && clearInterval(timer.value)
  }

  const test2 = () => {
    runTimer()
  }

  const clickRobot = (row: any) => {
    console.log('---clickRobot---', row)
    if (row.url) {
      window.open(row.url)
    }
  }
</script>

<style lang="scss" scoped>
  .jdybj {
    margin-left: 11px;
    width: 377px;
    .title {
      width: 377px;
      height: 42px;
      background-image: url('@/assets/images/binzhou/bt-bg-4.png');
      background-size: 100% 100%;
      padding-top: 14px;
      padding-left: 18px;
      img {
        height: 16px;
      }
    }
    .tabs {
      display: flex;
      padding: 24px 0px 12px 0px;
      justify-content: space-between;
      .tab1 {
        width: 47px;
        height: 32px;
        background-image: url('@/assets/images/binzhou/tab-47.png');
      }
      .tab2 {
        width: 81px;
        height: 32px;
        background-image: url('@/assets/images/binzhou/tab-81.png');
      }
      .tab {
        background-size: 100% 100%;
        text-align: center;
        font-size: 12px;
        font-family: Microsoft YaHei;
        line-height: 32px;
        color: #ffffff;
        cursor: pointer;
      }
      .active {
        color: #00fff0;
      }
    }
    .table-box {
      // display: flex;
      // justify-content: center;
      // align-items: center;
      overflow: hidden;
      width: 377px;
      height: 272px;
      position: relative;
    }
    .table {
      font-size: 12px;
      text-align: center;
      line-height: 24px;
      transform: scale(0.75);
      width: 500px;
      height: 365px;
      position: absolute;
      top: -47px;
      left: -63px;
      .thead {
        .t-row {
          background: #1c4f75;
          color: #00ffe3;
        }
      }
      .tbody {
        .t-row {
          border-top: 11px solid #0b2c44;
          background: #154162;
          color: #ffffff;
          &:hover {
            background: #a48526;
          }
          .robotName {
            cursor: pointer;
          }
        }
      }
      .t-row {
        display: flex;
        div {
          padding: 6px 2px;
          box-sizing: content-box;
          height: 24px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        div:nth-child(1) {
          width: 24px;
        }
        div:nth-child(2) {
          width: 108px;
        }
        div:nth-child(3) {
          width: 48px;
        }
        div:nth-child(4) {
          width: 48px;
        }
        div:nth-child(5) {
          width: 48px;
        }
        div:nth-child(6) {
          width: 60px;
        }
        div:nth-child(7) {
          width: 60px;
        }
        div:nth-child(8) {
          width: 72px;
        }
      }
    }
    .echart {
      width: 377px;
      height: 335px;
    }
  }
</style>
